<route lang="json5" type="page">
{
	style: {
		navigationStyle: 'custom',
		navigationBarTitleText: '中国民间故事',
	},
}
</route>

<template>
	<view class="page-bookrack">
		<fly-navbar backgroundColor="#F6F6F6" leftText="中国民间故事" fixed />
		<view class="mod">
			<view index="38" class="header">
				<text index="34" class="caption">第一站 寻觅英雄的足迹 </text>
				<text index="33" class="caption-1">阅读篇目: 《木兰从军》《穆桂英挂帅》《武松打虎》 </text>
				<view class="wrapper">
					<view index="37" class="mask" />
					<view index="35" class="overlayer" />
					<view index="36" class="layer" />
				</view>
			</view>
			<view class="submain">
				<text index="40" class="title">学生完成详情 </text>
				<view class="flex items-center mt-[15rpx] mb-[20rpx]">
					<view
						class="text-[24rpx] ml-[30rpx] text-center relative class-aHov"
						:style="{
							color: classKey === 'classunderway' ? '#fff' : '#919191',
							background: classKey === 'classunderway' ? '#2BA5E0' : '#F3F3F5',
						}"
						@tap="classTab('classunderway')"
					>
						三年级 1班
					</view>
					<view
						class="text-[24rpx] ml-2 text-center relative class-a"
						:style="{
							color: classKey === 'classover' ? '#fff' : '#919191',
							background: classKey === 'classover' ? '#2BA5E0' : '#F3F3F5',
						}"
						@tap="classTab('classover')"
					>
						雏鹰起飞班
					</view>
				</view>
				<view class="box-border flex justify-between items-center w-[682rpx] mt-[20rpx] mb-[20rpx]">
					<view class="text-[28rpx] w-[162rpx] text-left ml-[20rpx] relative"> 学生 </view>
					<view class="text-[28rpx] w-[200rpx] text-center relative">
						<text class="text-[#2BA5E0]">测练日期</text>
						<image
							class="w-[18rpx] h-[24rpx]"
							style="margin-left: 5rpx; vertical-align: middle"
							:src="baseImg + '/gdjh_pxBtn.png'"
						/>
					</view>
					<view class="text-[28rpx] w-[140rpx] text-center relative">
						<text>测练日期</text>
					</view>
					<view class="text-[28rpx] w-[160rpx] text-center relative">
						<text>测练日期</text>
					</view>
				</view>
			</view>
			<view index="39" class="main">
				<view class="box-border flex justify-between items-center w-[682rpx] mt-[20rpx]">
					<view class="text-[24rpx] w-[162rpx] h-[80rpx] text-left ml-[20rpx] relative">
						<image
							class="w-[60rpx] h-[60rpx]"
							:src="baseImg + '/moren.png'"
							style="float: left; margin-top: 10rpx"
						/>
						<text style="float: left; margin-left: 10rpx; line-height: 80rpx">学生</text>
					</view>
					<view
						class="text-[24rpx] w-[200rpx] h-[80rpx] text-center relative"
						style="line-height: 80rpx"
					>
						2023年11月28
					</view>
					<view
						class="text-[24rpx] w-[140rpx] h-[80rpx] text-center relative"
						style="line-height: 80rpx"
					>
						30分39秒
					</view>
					<view class="w-[160rpx] h-[80rpx] text-center relative">
						<image
							class="w-[40rpx] h-[40rpx]"
							style="margin-top: 18rpx"
							:src="baseImg + '/gdkj_ax.png'"
						/>
						<image
							class="w-[40rpx] h-[40rpx]"
							style="margin-top: 18rpx"
							:src="baseImg + '/gdkj_ax.png'"
						/>
						<image
							class="w-[40rpx] h-[40rpx]"
							style="margin-top: 18rpx"
							:src="baseImg + '/gdkj_ax.png'"
						/>
					</view>
				</view>
				<view class="box-border flex justify-between items-center w-[682rpx] mt-[20rpx]">
					<view class="text-[24rpx] w-[162rpx] h-[80rpx] text-left ml-[20rpx] relative">
						<image
							class="w-[60rpx] h-[60rpx]"
							:src="baseImg + '/moren.png'"
							style="float: left; margin-top: 10rpx"
						/>
						<text style="float: left; margin-left: 10rpx; line-height: 80rpx">学生</text>
					</view>
					<view
						class="text-[24rpx] w-[200rpx] h-[80rpx] text-center relative"
						style="line-height: 80rpx"
					>
						2023年11月28
					</view>
					<view
						class="text-[24rpx] w-[140rpx] h-[80rpx] text-center relative"
						style="line-height: 80rpx"
					>
						30分39秒
					</view>
					<view class="w-[160rpx] h-[80rpx] text-center relative">
						<image
							class="w-[40rpx] h-[40rpx]"
							style="margin-top: 18rpx"
							:src="baseImg + '/gdjh_lx.png'"
						/>
						<image
							class="w-[40rpx] h-[40rpx]"
							style="margin-top: 18rpx"
							:src="baseImg + '/gdjh_lx.png'"
						/>
						<image
							class="w-[40rpx] h-[40rpx]"
							style="margin-top: 18rpx"
							:src="baseImg + '/gdjh_lx.png'"
						/>
					</view>
				</view>
				<view class="box-border flex justify-between items-center w-[682rpx] mt-[20rpx]">
					<view class="text-[24rpx] w-[162rpx] h-[80rpx] text-left ml-[20rpx] relative">
						<image
							class="w-[60rpx] h-[60rpx]"
							:src="baseImg + '/moren.png'"
							style="float: left; margin-top: 10rpx"
						/>
						<text style="float: left; margin-left: 10rpx; line-height: 80rpx">学生</text>
					</view>
					<view
						class="text-[24rpx] w-[200rpx] h-[80rpx] text-center relative"
						style="line-height: 80rpx"
					>
						2023年11月28
					</view>
					<view
						class="text-[24rpx] w-[140rpx] h-[80rpx] text-center relative"
						style="line-height: 80rpx"
					>
						30分39秒
					</view>
					<view class="w-[160rpx] h-[80rpx] text-center relative">
						<image
							class="w-[40rpx] h-[40rpx]"
							style="margin-top: 18rpx"
							:src="baseImg + '/gdjh_lx.png'"
						/>
						<image
							class="w-[40rpx] h-[40rpx]"
							style="margin-top: 18rpx"
							:src="baseImg + '/gdjh_lx.png'"
						/>
						<image
							class="w-[40rpx] h-[40rpx]"
							style="margin-top: 18rpx"
							:src="baseImg + '/gdkj_ax.png'"
						/>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { systemInfo } from '@/utils/getSystemInfo';

const baseImg = ref(import.meta.env.VITE_STATIC_IMAGE);

const { contentHeight } = systemInfo();

const classKey = ref('classunderway'); // classover

const classTab = (key: string) => {
	classKey.value = key;
};

const tabKey = ref('underway'); // classover

const changeTab = (key: string) => {
	tabKey.value = key;
};
</script>

<style lang="scss">
page {
	background: #f6f6f6;
}
</style>
<style lang="scss" scoped>
.page-bookrack {
	width: 100%;
	height: 100vh;
}

.mod {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	width: 750rpx;
	padding: 30rpx 0 0;
	background-color: rgb(249 249 249 / 100%);
}

.header {
	display: flex;
	flex-direction: column;
	align-self: center;
	justify-content: flex-start;
	width: 682rpx;
	padding: 27rpx 0 18rpx;
	background-color: rgb(253 255 255 / 100%);
	border-radius: 30rpx;
	box-shadow: 0 5rpx 20rpx 0 rgb(0 0 0 / 7%);
}

.caption {
	align-self: flex-start;
	margin-left: 30rpx;
	overflow: hidden;
	font-size: 28rpx;
	font-style: normal;
	line-height: 56rpx;
	color: rgb(48 48 48 / 100%);
	text-align: left;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.caption-1 {
	align-self: flex-start;
	margin-left: 30rpx;
	overflow: hidden;
	font-size: 24rpx;
	font-style: normal;
	line-height: 56rpx;
	color: rgb(94 94 94 / 100%);
	text-align: left;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wrapper {
	display: flex;
	flex-direction: row;
	align-self: center;
	justify-content: center;
	width: 607rpx;
	margin-top: 40rpx;
}

.mask {
	align-self: center;
	width: 24rpx;
	height: 9rpx;
	background-color: rgb(143 144 146 / 100%);
	border-radius: 9rpx;
}

.overlayer {
	align-self: center;
	width: 9rpx;
	height: 9rpx;
	margin-left: 7rpx;
	background-color: rgb(197 198 200 / 100%);
	border-radius: 9rpx;
}

.layer {
	align-self: center;
	width: 9rpx;
	height: 9rpx;
	margin-left: 7rpx;
	background-color: rgb(197 198 200 / 100%);
	border-radius: 9rpx;
}

.submain {
	display: flex;
	flex-direction: column;
	align-self: center;
	justify-content: flex-start;
	width: 682rpx;
}

.title {
	align-self: flex-start;
	margin: 27rpx 0 0 30rpx;
	overflow: hidden;
	font-size: 34rpx;
	font-style: normal;
	line-height: 56rpx;
	color: rgb(48 48 48 / 100%);
	text-align: left;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.class-aHov {
	height: 45rpx;
	padding: 0 20rpx;
	line-height: 45rpx;
	background-color: rgb(43 165 223 / 100%);
	border-radius: 45rpx;
}

.class-a {
	height: 45rpx;
	padding: 0 20rpx;
	line-height: 45rpx;
	background-color: rgb(242 243 245 / 100%);
	border-radius: 45rpx;
}

.wrapper-2 {
	display: flex;
	flex-direction: row;
	align-self: center;
	justify-content: space-between;
	width: 682rpx;
	margin-top: 14rpx;
}

.main {
	display: flex;
	flex-direction: column;
	align-self: center;
	justify-content: flex-start;
	width: 682rpx;
	padding: 0 0 30rpx;
	background-color: rgb(253 255 255 / 100%);
	background-repeat: no-repeat;
	border-radius: 20rpx;
	box-shadow: 0 5rpx 20rpx 0 rgb(0 0 0 / 7%);
}
</style>
